No entiendo por qué funciona cuando paso una función anónima al campo @input de mi componente de entrada html, pero no funciona cuando llamo a una función real con exactamente el mismo código. Aquí está el código cuando no funciona:
<script setup> import { ref } from 'vue' const text = ref('') const numberChar = ref(0) const numberWords = ref(0) function count() { numberChar = text.length numberWords = text.split(' ').filter((e) => e != '').length } </script> <template> <div class="box"> <input v-model="text" placeholder="Write here" @input="count"/> <p> Text : {{text}} <br> Characters : {{numberChar}} <br> Words : {{numberWords}} </p> </div> </template>pero cuando simplemente pongo esto:
<input v-model="text" placeholder="Write here" @input="() => numberChar = text.length"/>el valor numberChar se modifica y muestra correctamente. Estoy comenzando con Vuejs, así que me falta algo, pero hace una hora que estoy luchando con esto...
Gracias a todos, logré corregir este problema. El problema fue que escribí en mi función.
numberChar = text.lengthen vez de
numberChar.value = text.value.length Lo extraño es que en mi función anónima funcionaba sin el .value y no sé por qué. En el tutorial aquí: https://vuejs.org/tutorial/#step-4 lo están usando de la forma en que traté de usarlo. ¿Y también dijeron en el tutorial que .value no es necesario porque está implícito si no se especifica nada?
Para aquellos de ustedes que dicen que la etiqueta y el título de mi pregunta no son correctos, intentaré hacerlo mejor para la próxima vez, gracias. (es mi primera publicación en stackoverflow)
Gracias :)
Mire: https://vuejs.org/guide/introduction.html#api-styles
Lo que debe hacer es hacer que el count sea visible en su componente. Algo como:
<script setup> ... export default { methods: { count() { // Your code here. } } } </script> <template> <div class="box"> <input placeholder="Write here" @input="count"/> ... </div> </template>Estoy bastante seguro de que si hubiera presionado F12 y mirado más de cerca la consola, vería que su error ocurre dentro de su función de conteo. Así que la función en sí ya se llama
También necesita acceder a sus valores con .value
<script setup> import { ref } from 'vue' const text = ref('') const numberChar = ref(0) const numberWords = ref(0) function count() { numberChar.value = text.value.length numberWords.value = text.value.split(' ').filter((e) => e != '').length } </script>